<template>
    <div>
        <ul>
            <div class="timeStamp">
                <span class="day">28
                    <em>9</em>
                </span>
                <span class="week">星期一</span>
                <span class="record">今日打卡4次&nbsp;工时时长6.5小时</span>
            </div>
            <li>
                <div>
                    <span class="clockInOut">
                        <strong>18:29</strong>打卡时间</span>
                    <em class="commuterTime">(下班时间&nbsp;18:30)</em>
                    <em class="abnormal">早退</em>
                    <em class="outwork">外勤</em>
                </div>

                <p class="companyAddress">天瑞111商务大厦</p>
                <p class="locationAddress">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-location"></use>
                    </svg>厦门市思明区万达</p>
                <span class="correct ">迟到申诉·驳回 &nbsp;></span>
                <div class="dot"></div>
            </li>
            <li>
                <div>
                    <span class="clockInOut">
                        <strong>14:01</strong>打卡时间</span>
                    <em class="commuterTime">(上班时间&nbsp;14:00)</em>
                    <em class="abnormal">迟到</em>
                    <em class="outwork">外勤</em>
                </div>
                <p class="companyAddress">天瑞2222商务大厦</p>
                <p class="locationAddress">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-location"></use>
                    </svg>厦门市思明区观音山CDB宜兰路4号</p>
                <img src="http://owtz12sxf.bkt.clouddn.com/office1.jpg" alt="">
                <div class="taskLink">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sale"></use>
                    </svg>
                    <p class="task">22销售客户关联Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, impedit.</p>
                    <p class="title">22客户：赛百味Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum, dolor.</p>
                </div>
                <div class="dot"></div>
            </li>
            <li>
                <div>
                    <span class="clockInOut">
                        <strong>12:01</strong>打卡时间</span>
                    <em class="commuterTime">(下班时间&nbsp;12:00)</em>
                    <em class="abnormal ">迟到</em>
                </div>
                <p class="companyAddress">天瑞3333商务大厦</p>
                <p class="locationAddress">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-location"></use>
                    </svg>厦门市思明区观音山CDB宜兰路4号</p>
                <!-- <span class="correct">发起申诉&nbsp;></span> -->
                <div class="dot"></div>
            </li>
            <li>
                <div>
                    <span class="clockInOut">
                        <strong>09:29</strong>打卡时间</span>
                    <em class="commuterTime">(上班时间&nbsp;09:30)</em>
                    <em class="abnormal ">迟到</em>
                </div>
                <p class="companyAddress">天瑞9444商务大厦</p>
                <p class="locationAddress">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-location"></use>
                    </svg>厦门市思明区观音山CDB宜兰路4号</p>
                <div class="dot"></div>
            </li>
        </ul>
        <ul>
            <div class="timeStamp">
                <span class="day">25
                    <em>9</em>
                </span>
                <span class="week">星期五</span>
                <span class="record">今日打卡4次&nbsp;工时时长6.5小时</span>
            </div>
            <li>
                <div>
                    <span class="clockInOut">
                        <strong>18:29</strong>打卡时间</span>
                    <em class="commuterTime">(下班时间&nbsp;18:30)</em>
                    <em class="abnormal">早退</em>
                </div>
                <p class="companyAddress">天瑞99商务大厦</p>
                <p class="locationAddress">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-location"></use>
                    </svg>厦门市思明区观音山CDB宜兰路4号</p>
                <div class="dot"></div>
            </li>
            <li>
                <div>
                    <span class="clockInOut">
                        <strong>14:01</strong>打卡时间</span>
                    <em class="commuterTime">(上班时间&nbsp;14:00)</em>
                    <em class="abnormal">迟到</em>
                </div>
                <p class="companyAddress">天瑞99商务大厦</p>
                <p class="locationAddress">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-location"></use>
                    </svg>厦门市思明区观音山CDB宜兰路4号</p>
                <span class="correct ">发起申诉&nbsp;></span>
                <div class="dot"></div>
            </li>
            <li>
                <div>
                    <span class="clockInOut">
                        为打卡</span>
                    <em class="commuterTime">(下班时间&nbsp;12:00)</em>
                    <em class="abnormal ">缺卡</em>
                </div>
                <span class="correct ">申请补卡&nbsp;></span>
                <div class="dot"></div>
            </li>
            <li>
                <div>
                    <span class="clockInOut">
                        <strong>09:29</strong>打卡时间</span>
                    <em class="commuterTime">(上班时间&nbsp;09:30)</em>
                    <em class="abnormal ">迟到</em>
                </div>
                <p class="companyAddress">天瑞99商务大厦</p>
                <p class="locationAddress">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-location"></use>
                    </svg>厦门市思明区观音山CDB宜兰路4号</p>
                <span class="correct  ">发起申诉&nbsp;></span>
                <div class="dot"></div>
            </li>
        </ul>
        <p v-for="x in 100" :key="x">{{x}}</p>
    </div>
</template>

<script>
    export default {
        name: 'attendance--abnormal',
        components: {},
        data() {
            return {}
        }
    }
</script>

<style>

</style>